<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单确认 - eBusiness</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/slider.js}"></script>
</head>
<body>
    <div th:replace="~{common/header :: header}"></div>

    <div class="slider-container">
        <div class="slides">
            <img th:src="@{/images/1.jpg}" alt="Slide 1" class="slide active">
            <img th:src="@{/images/2.png}" alt="Slide 2" class="slide">
            <img th:src="@{/images/3.png}" alt="Slide 3" class="slide">
        </div>
        <div class="navigation-arrows">
            <span class="prev-arrow">&#10094;</span>
            <span class="next-arrow">&#10095;</span>
        </div>
        <div class="pagination-dots">
            <span class="dot active" data-slide="0"></span>
            <span class="dot" data-slide="1"></span>
            <span class="dot" data-slide="2"></span>
        </div>
    </div>

    <div class="category-search-bar-container">
        <div class="main-nav">
            <ul>
                <li><a th:href="@{/index}">首页</a></li>
                <li th:each="type : ${goodsTypes}"><a th:href="@{/category(typeId=${type.id})}" th:text="${type.typename}"></a></li>
            </ul>
        </div>
        <div class="header-search">
            <form th:action="@{/search}" method="get">
                <input type="text" name="keyword" placeholder="请输入关键词" th:value="${keyword}">
                <button type="submit">搜索</button>
            </form>
        </div>
    </div>

    <div class="main-content">
        <h2>订单确认</h2>
        <p th:if="${error}" style="color: red;" th:text="${error}"></p>

        <div class="order-details-card">
            <h3>订单信息</h3>
            <table class="checkout-table">
                <thead>
                    <tr>
                        <th>商品信息</th>
                        <th>单价 (元)</th>
                        <th>数量</th>
                        <th>小计</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="item : ${cartDetails}">
                        <td>
                            <img th:src="@{/images/{picture}(picture=${item.goods.gpicture})}" alt="商品图片" style="width: 50px; height: 50px; vertical-align: middle; margin-right: 10px;">
                            <span th:text="${item.goods.gname}"></span>
                        </td>
                        <td th:text="${item.goods.grprice}"></td>
                        <td th:text="${item.shoppingNum}"></td>
                        <td th:text="${item.subtotal}"></td>
                    </tr>
                </tbody>
            </table>

            <div class="order-summary-footer">
                <div class="order-total-text">
                    <p>购物金额总计(不含运费) ¥<span id="totalAmount" th:text="${totalAmount}"></span>元</p>
                </div>
                <div class="order-buttons">
                    <form th:action="@{/cart}" method="get">
                        <button type="submit" class="checkout-back-btn">返回购物车</button>
                    </form>
                    <form th:action="@{/placeOrder}" method="post">
                        <button type="submit" class="checkout-submit-btn">提交订单</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div th:replace="~{common/footer :: footer}"></div>

    <!-- Order Confirmation Modal -->
    <div id="orderConfirmationModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h3>订单已提交！</h3>
            <p>您的订单编号为: <strong id="modalOrderId"></strong></p>
            <p>
                <a id="modalPayLink" href="#" class="btn btn-primary">去支付</a>
            </p>
            <p>
                <a href="/orders" class="btn btn-secondary">查看我的所有订单</a>
            </p>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // Get the modal elements
            const modal = $('#orderConfirmationModal');
            const closeButton = $('.close-button');
            const modalOrderId = $('#modalOrderId');
            const modalPayLink = $('#modalPayLink');
            const submitOrderBtn = $('.checkout-submit-btn'); // Use the class for the submit button

            modal.css('display', 'none'); // 确保模态框在页面加载时是隐藏的

            // When the user clicks on <span> (x), close the modal
            closeButton.on('click', function() {
                modal.hide();
            });

            // When the user clicks anywhere outside of the modal, close it
            $(window).on('click', function(event) {
                if ($(event.target).is(modal)) {
                    modal.hide();
                }
            });

            // Handle "提交订单" button click with AJAX
            submitOrderBtn.on('click', function(event) {
                event.preventDefault(); // Prevent default form submission

                // Disable button to prevent multiple submissions
                submitOrderBtn.prop('disabled', true).text('提交中...');

                $.ajax({
                    url: '/placeOrder',
                    type: 'POST',
                    dataType: 'json', // 明确指定预期的数据类型为JSON
                    success: function(response) {
                        if (response.success) {
                            modalOrderId.text(response.orderId);
                            modalPayLink.attr('href', '/order/detail/' + response.orderId); // Link to order detail page
                            modal.css('display', 'flex'); // 使用flexbox居中显示模态框
                            // Optionally, clear the cart display after successful order creation
                            // For now, we'll let the user navigate or refresh.
                        } else {
                            alert('订单提交失败: ' + response.message);
                        }
                    },
                    error: function(xhr) {
                        let errorMessage = '提交订单失败，请稍后再试！';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        alert(errorMessage);
                    },
                    complete: function() {
                        // Re-enable button after request is complete
                        submitOrderBtn.prop('disabled', false).text('提交订单');
                    }
                });
            });
        });
    </script>
</body>
</html> 